How to put individual column filter inputs at top of columns?

MikeS

I've tried to modify the column filter using text box inputs example to move the inputs to the top of the columns as seen here, http://jsfiddle.net/s8F9V/.

It works, but, the inputs now also trigger the column sorting when I click in them. The column header text no longer triggers the sort.

How can I have it such that the column header text triggers the sorting and have the text box input filter the content?

daniel_r

You can add onclick="stopPropagation(event);" to you inputs
where stopPropagation is

[code]
function stopPropagation(evt) {
if (evt.stopPropagation !== undefined) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
}
[/code]

That's what I'm doing in my yadcf plugin http://yadcf-showcase.appspot.com/multiple_tables.html and it works just fine

Working fiddle: http://jsfiddle.net/s8F9V/1/

MikeS

Thanks for the updated fiddle daniel_r.

It's a bit better, however, when I click on the column header text (like "Name"), the column does not sort. I suspect that it needs just a little more tweaking :)

MikeS

BTW, I'm using dataTables version 1.10 beta 2!!

MikeS

Allan,

Are you able to see anything obvious in my jsfiddle example that would prevent version 1.10 beta 2 from having the column filter text boxes in the header?

I was hoping to have the input boxes at the top of the column (moved from your example where they are in the footers) and keep the header text as the trigger to sorting the column.

Is that not possible in this version?

allan

Use `orderCellsTop` to have DataTables attach the sort listener to the top row in the header: http://jsfiddle.net/s8F9V/3/ .

Docs: http://next.datatables.net/reference/option/orderCellsTop

Allan

MikeS

Allan, thank you for pointing out that truly hidden gem. I would never have thought to try looking for such a feature in the reference documentation.

allan

Its a useful option for certain. Its a little limited in that it is binary at the moment, so its either the top or bottom cells, not a mix of both, or a middle row, but that appears to cover about 99% of use cases!

Allan

galliva

Try this:

"initComplete": function () {
var r = $('#MyDataTable tfoot tr');

// if you are using bootstrap, set the correct padding

r.find('th').each(function(){

$(this).css('padding', 8);

});

$('#MyDataTable thead').append(r);

},

Shade

Hi,

This works great for me except in one instance:

• When I use ColVis with column-filters, the colVis check does not hide the input.

What happens is the column hides (like its suppose to), but the input and header stay visible.

Anyway to make the input disappear with the column when using ColVis?

vogomatix

It's dubious in terms of W3C standards but having a separate thead block for the filters also works in IE, Firefox and Chrome..... :-)

navjeet

use this css in jquery.dataTables.css.......This is worked to put search boxes with header of table..... :) enjoye

tfoot {
display: table-header-group;
}

allan

Heh - nice trick. I like it :-)

Thanks for sharing that with us.

Regards,
Allan

vivekanand

@allan, orderCellsTop thing works well, but when I use "scrollX": true, search is not happening

http://jsfiddle.net/s8F9V/26/

Just updated the below code in your fiddle

var table = $('#example').DataTable( {
"orderCellsTop": true ,
"scrollX": true,
} );

allan

Have a look at this discussion: https://datatables.net/forums/discussion/24068 which deals with a similar issue, just in the footer.

Allan

vivekanand

Thanks allan, it was informative, but I am not able to reproduce it in my scenario for some reason. Can you give me an example for the fiddle I've given above ?

I just started learning js, so I might have missed something very obvious while trying it.

allan

Easiest option is just to reorder the code and but the event handler before the DataTables initialisation: http://jsfiddle.net/s8F9V/27/ .

Allan

vivekanand

@allan, thanks a lot, its perfect ...

techupin

@allan, thanks. that really helped!!!